<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" type="image/x-icon">
    <title>canvas</title>
</head>
<!-- <script src="./util.js"></script> -->

<style>
    main{
        background-color: rgb(186, 208, 209);
    }
    #pic1 {
        background-image: linear-gradient(rgba(54,54,100,.8),rgba(54,54,100,.5), rgba(22, 77, 160, 0.158));
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body> 
    
        <canvas id = "pic1"></canvas>
        <!-- <canvas id = "pic2"></canvas>
        <canvas id = "pic3"></canvas>
        <canvas id = "pic4"></canvas> -->
</body>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute float a_PointSize;
    void main(){
        //点位
        gl_Position=a_Position;
        //尺寸
        gl_PointSize=a_PointSize;
    }
  </script>
<script id="fragmentShader" type="x-shader/x-fragment">
    //对浮点数精度定义 中
    precision mediump float;
    uniform vec4 u_FragColor;
    void main(){
        //计算两个点的距离， coord 片元在一个点的位置
        float dist  = distance(gl_PointCoord, vec2(0.5,0.5));
        if(dist < 0.5){
            gl_FragColor = u_FragColor;
        }else{
            //丢弃，不渲染片元
            discard;
        }
    }
</script>
<script type="module">
    import { initShaders } from './util.js';
    import Compose from './Compose.js';
    import Track from './Track.js';
    
    const canvas =  document.getElementById('pic1');
    canvas.width = document.body.clientWidth;
    canvas.height = window.innerHeight -4;
    const gl = canvas.getContext('webgl');

    const vsSource = document.querySelector("#vertexShader").innerText;
    const fsSource = document.querySelector("#fragmentShader").innerText;

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    initShaders(gl,vsSource, fsSource);
// 声明颜色
    gl.clearColor(0,0,0,0);
    // 上底色
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 获取attribute变量 名
    // a_Position = vec4(1,0,0,1);
    const a_Position  =gl.getAttribLocation(gl.program, 'a_Position');
    const a_PointSize  =gl.getAttribLocation(gl.program, 'a_PointSize');
    // 
    const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')


    // gl.vertexAttrib1f(a_Position, 0.3);

    // // 绘制定点
    // gl.drawArrays(gl.POINTS,0,1);

//     setTimeout(()=>{
//         gl.vertexAttrib2f(a_Position,0.1, 0.2)
//         gl.drawArrays(gl.POINTS,0,1);
// // 异步直接白了，和鼠标点击一样
//     },1000)
    const a_points =[]

    const compose = new Compose()

    function render(){
        gl.clear(gl.COLOR_BUFFER_BIT);
        a_points.forEach(({x,y,s,a})=>{
            gl.vertexAttrib2f(a_Position, x,y)
            gl.vertexAttrib1f(a_PointSize, s);
            gl.uniform4f(u_FragColor, 0.87, 0.91, 1,a)
            gl.drawArrays(gl.POINTS, 0, 1)
        })
    }
    console.log(canvas)
    canvas.addEventListener('click', ({clientX, clientY})=>{

        const {width, height, left, top} = canvas.getBoundingClientRect()
        // console.log(canvas.getClientRects())//返回DOMRect的集合
        let [cssX, cssY] = [clientX - left, clientY - top] // 矢量相减得到相对坐标
         // 坐标原点转换
        const [halfWidth, halfHeight] = [width /2, height/2];
        cssX -= halfWidth;
        cssY -= halfHeight;
        // xoy坐标系旋转-180，也可认为绕x轴旋转
        cssY = - cssY;
        // 单位转换
        const [x,y] = [cssX / halfWidth, cssY / halfHeight];

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.vertexAttrib2f(a_Position, x,y);
        gl.drawArrays(gl.POINTS, 0, 1)
        const s = Math.random()*5 + 2;
        const a =1;
        const obj = {x,y,s,a}
        // 建立轨道对象
        a_points.push(obj);

        const track =new Track(obj);
        track.start = new Date();
        track.timeLen = 2000;
        track.loop = true;
      
        track.keyMap = new Map([
            [
                'a',
                [
                    [500,a],
                    [1000,0],
                    [1500,a],
                ]
            ]
        ]);
        compose.add(track);
        // render()
    });

    !(function ani(){
        compose.update(new Date());
        render();
        requestAnimationFrame(ani);
    })();

</script>
</html>